<template>
  <swiper
    class="level-swiper"
    previous-margin="30rpx"
    next-margin="30rpx"
    :current="currentLevel"
    @change="handleLevelChange"
  >
    <swiper-item
      class="level-swiperitem"
      v-for="level in rightLevels"
      :key="level.levelType"
    >
      <view
        class="level-swiperitem-banner"
        :class="['level-swiperitem-banner-bg' + level.levelType]"
      >
        <view class="level-swiperitem-content">
          <view class="text-white text-bold text-lg mb-base">
            {{ level.levelName }}
          </view>
          <view
            v-if="userInfo.customerLevel > level.levelType"
            class="text-white text-base text-sm"
          >
            您已超越该等级~
          </view>
          <template v-else-if="userInfo.customerLevel == level.levelType">
            <view class="d-flex-column mb-base">
              <view class="d-flex items-center mb-xs">
                <text class="mr-xs">甜蜜值</text>
                <text class="text-base">
                  {{ userInfo.growthValue }}
                </text>
                <text class="text-base">/{{ level.growthValueMax }} </text>
              </view>
              <view class="level-swiperitem-progress">
                <view
                  class="level-swiperitem-progress-value"
                  :style="{
                    width: processPercentage(level.growthValueMax)
                  }"
                ></view>
              </view>
            </view>
            <view class="text-sm">
              {{ processNextLevelTxt(level) }}
            </view>
          </template>
          <view v-else>
            {{ highLevelTxt(level) }}
          </view>
        </view>
        <image
          :src="`/static/images/mine/card_bg_level_${level.levelType}.png`"
          class="level-swiperitem-card-bg"
        />
        <view class="level-swiperitem-card">
          <view
            class="d-flex-row-y-center mb-sm"
            @tap="goToRightDetail"
          >
            <view v-if="userInfo.customerLevel != level.levelType">
              {{ level.levelName }}会员尊享
            </view>
            <view v-else>您已解锁</view>
            <view
              :class="{
                'text-primary': userInfo.customerLevel == level.levelType
              }"
            >
              {{ level.currentLevelRightsNum }}
            </view>
            <view v-if="userInfo.customerLevel != level.levelType">
              项权益
            </view>
            <view v-else>项特权</view>
            <image
              src="/static/images/base/right.png"
              class="level-swiperitem-card-righticon"
            />
          </view>
          <view class="level-swiperitem-card-right-categories">
            <view
              :class="[rightCategoryClassName(level, category)]"
              v-for="(category, index) in level.categoryRights"
              :key="index"
              @click="handleRightCategoryClick(level, category)"
            >
              {{ category.categoryName }}
            </view>
          </view>
          <scroll-view
            class="level-swiperitem-card-rights"
            scroll-x
          >
            <view class="py-base">
              <view
                class="level-swiperitem-card-rightitem"
                v-for="(right, index) in levelCategoryRights(level)"
                :key="index"
              >
                <image
                  :src="right.imgs"
                  class="level-swiperitem-card-rightitem-image"
                />
                <view class="text-color mb-sm text-sm">
                  {{ right.rightName }}
                </view>
                <view class="text-color-grey text-xs">
                  {{ right.assistDesc }}
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </swiper-item>
  </swiper>
</template>
<script>
import { mapState } from "vuex"
export default {
  name: "RightLevelSection",
  props: {
    currentLevel: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      levelBgColor: [
        ["#56A3FF", "#305DFF"],
        ["#FFC63B", "#FFA14B"],
        ["#B57FFA", "#B16DFC"],
        ["#322D27", "#312C2A"]
      ]
    }
  },
  computed: {
    ...mapState("user", ["userInfo", "rightLevels"]),
    rightCategoryClassName() {
      return (level, category) => {
        let className = "level-swiperitem-card-right-categories-item"
        if (category.selected) {
          className += ` level-swiperitem-card-right-categories-item-active-${level.levelType}`
        }
        return className
      }
    },
    levelCategoryRights() {
      return level => {
        return level.categoryRights.find(category => category.selected).rights
      }
    },
    processPercentage() {
      return max => {
        return (this.userInfo.growthValue / max) * 100 + "%"
      }
    },
    processNextLevelTxt() {
      return level => {
        return `再升一级可享【${level.nextLevelTxt}】等${level.nextLevelRightsNum}项权益`
      }
    },
    highLevelTxt() {
      return level => {
        return `累计${level.growthValueMin}点甜蜜值可升级，享【${level.currentLevelTxt}】等${level.currentLevelRightsNum}项权益`
      }
    }
  },
  methods: {
    handleLevelChange(e) {
      this.$emit("change", e.detail.current)
    },
    handleRightCategoryClick(level, category) {
      level.categoryRights.forEach(category => {
        category.selected = false
      })
      category.selected = true
    },
    goToRightDetail() {
      let level = this.rightLevels[this.currentLevel]
      uni.navigateTo({
        url: `/pages/customer-center/rights/rights?level=${level.levelType - 1}`
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.level-swiper {
  width: 100%;
  height: 560rpx;
}

.level-swiperitem {
  display: flex;
  justify-content: center;
  align-items: center;

  &-banner {
    width: calc(100% - 20rpx);
    height: calc(100% - 20rpx);
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
    border-radius: $uni-border-radius-xxl;

    &-bg1 {
      background: linear-gradient(90deg, #56a3ff 0%, #305dff 100%);
    }
    &-bg2 {
      background: linear-gradient(90deg, #ffc63b 0%, #ffa14b 100%);
    }
    &-bg3 {
      background: linear-gradient(90deg, #b57ffa 0%, #b16dfc 100%);
    }
    &-bg4 {
      background: linear-gradient(90deg, #322d27 0%, #312c2a 100%);
    }
  }

  &-content {
    width: 400rpx;
    height: 210rpx;
    position: relative;
    padding: $uni-spacing-row-lg $uni-spacing-row-xl;
    display: flex;
    flex-direction: column;
    color: #fff;
    font-size: $uni-font-size-sm;
  }

  &-progress {
    width: 400rpx;
    height: 10rpx;
    background-color: #ffd777;
    border-radius: $uni-border-radius-base;
    &-value {
      height: 100%;
      background-color: #ffffff;
      border-radius: $uni-border-radius-base;
    }
  }

  &-card-bg {
    position: absolute;
    top: -20rpx;
    right: -10rpx;
    width: 280rpx;
    height: 248rpx;
  }

  &-card {
    width: calc(100% - 4rpx);
    height: 328rpx;
    margin-left: 2rpx;
    border-radius: $uni-border-radius-xxl;
    background-color: #fff;
    padding: $uni-spacing-row-lg $uni-spacing-row-xl;
    display: flex;
    flex-direction: column;
    color: $uni-text-color;
    font-size: $uni-font-size-base;

    &-righticon {
      width: 34rpx;
      height: 34rpx;
      margin-left: $uni-spacing-row-xs;
    }

    &-right-categories {
      display: flex;
      align-items: center;
      gap: $uni-spacing-row-base;
      margin-top: $uni-spacing-row-base;

      &-item {
        height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 25rpx;
        border: 1rpx solid $uni-border-color;
        color: $uni-text-color;
        font-size: $uni-font-size-sm;
        padding: 0 $uni-spacing-row-lg;

        &-active-1 {
          background-color: #f1f6ff;
          border-color: #56a3ff;
        }
        &-active-2 {
          background-color: #fff7e8;
          border-color: #ffd587;
        }
        &-active-3 {
          background-color: #efe5ff;
          border-color: #c5a2ff;
        }
        &-active-4 {
          background-color: #fcf1e5;
          border-color: #fcd2a5;
        }
      }
    }

    &-rights {
      width: 100%;
      white-space: nowrap;
    }

    &-rightitem {
      display: inline-block;
      text-align: center;
      margin-right: $uni-spacing-row-base;

      &-image {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: $uni-spacing-row-xs;
      }
    }
  }
}
</style>
